import { useEffect } from 'react'
import './index.less'
import backIcon from '../../image/back.png'
import ddLoginIcon from '../../image/dd.png'
export default function DDLogin(props: { onClick: () => void }) {
  useEffect(() => {
    initQrcode()
  }, [])
  const initQrcode = () => {
    window.DTFrameLogin(
      {
        id: 'dd_login_qrcode_box',
        width: 300,
        height: 300,
      },
      {
        redirect_uri: encodeURIComponent('http://10.2.3.145:9088/login'),
        client_id: 'dingfkbf6ozjdrs0pilq',
        scope: 'openid',
        response_type: 'code',
        // state: 'xxxxxxxxx',
        prompt: 'consent',
      },
      (loginResult) => {
        const { redirectUrl, authCode, state } = loginResult
        window.location.href = redirectUrl
      },
      (errorMsg) => {
        console.error(`errorMsg of errorCbk: ${errorMsg}`)
      },
    )
  }
  return (
    <div className="dd_login_wrap">
      <img className="dd_back_img" src={backIcon} onClick={props.onClick}></img>
      <div className="dd_login_box">
        <img className="dd_login_icon" src={ddLoginIcon}></img>
        <div className="dd_login_title">使用钉钉扫码登录</div>
        <div id="dd_login_qrcode_box"></div>
      </div>
    </div>
  )
}
